/**
  此处禁用!important,deep的样式权重高于同类样式，采用!important会导致外部覆盖此处样式困难。
  已覆写组件
  el-button
  el-checkbox
  el-switch
  el-input
  el-textarea
  el-select
  el-pagination
  el-radio
**/

$btn-border-color_default: #dcdfe6; // 默认按钮边框色值
$btn-text-color_default: #606266; // 默认按钮文字色值

$default-text-color: #606266; // 默认文字色值
$theme: var(--theme, #ff6a6c);
/**
  UIUE规范中确认按钮最小宽度为60px 如有需要可添加 min-small 样式名
 */
// 默认按钮样式
@mixin buttonStyleDefault {
  background: #ffffff;
  border: 1px solid $btn-border-color_default;
  color: $btn-text-color_default;
}
@mixin buttonStylePrimary {
  background: $theme;
}
@mixin el-button-primary_is-plain {
  background: #fff;
  color: var(--theme);
  border-color: var(--theme);
}
// 按钮样式覆写
::v-deep .el-button {
  font-size: 14px;
  border-radius: 4px;
  padding: 8px 12px;
  &.el-button--default {
    @include buttonStyleDefault;
    &:hover:not(.is-disabled) {
      @include buttonStyleDefault;
      opacity: 0.6;
    }
    &:active:not(.is-disabled) {
      @include buttonStyleDefault;
      opacity: 0.8;
    }
    &:focus {
      @include buttonStyleDefault;
    }
    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      @include buttonStyleDefault;
      opacity: 0.4;
    }
  }
  &.el-button--primary {
    @include buttonStylePrimary;
    &:hover:not(.is-disabled) {
      @include buttonStylePrimary;
      opacity: 0.6;
    }
    &:active:not(.is-disabled) {
      @include buttonStylePrimary;
      opacity: 0.8;
    }
    &:focus {
      @include buttonStylePrimary;
    }
    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      @include buttonStylePrimary;
      opacity: 0.4;
    }
  }
  &.el-button-primary_is-plain {
    @include el-button-primary_is-plain;
    &:hover:not(.is-disabled) {
      @include el-button-primary_is-plain;
      opacity: 0.6;
    }
    &:active:not(.is-disabled) {
      @include el-button-primary_is-plain;
      opacity: 0.8;
    }
    &:focus {
      @include el-button-primary_is-plain;
    }
    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      @include el-button-primary_is-plain;
      opacity: 0.4;
    }
  }
  &.el-button--text {
    &:hover:not(.is-disabled) {
      opacity: 0.6;
    }
    &:active:not(.is-disabled) {
      opacity: 0.8;
    }
  }
  &.min-small {
    min-width: 60px;
  }
}

// 复选框样式覆写
::v-deep .el-checkbox {
  .el-checkbox__inner {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #fff;
    &::after {
      left: 5px;
      top: 2px;
    }
    &:hover {
      border-color: #c0c4cc;
    }
  }
  .is-focus .el-checkbox__inner {
    border-color: $btn-border-color_default;
  }
  .is-indeterminate {
    &.is-disabled {
      opacity: 0.4;
      .el-checkbox__inner::before {
        background: #fff;
        border-color: #fff;
      }
    }
    .el-checkbox__inner::before {
      top: 5px;
      height: 4px;
      background: #fff;
      border-color: #fff;
      transform: scale(0.5);
    }
  }
  .el-checkbox__input {
    .el-checkbox__inner {
      background-color: #fff;
    }
    &.is-checked,
    &.is-indeterminate {
      .el-checkbox__inner {
        border-color: $theme;
        background: $theme;
        &::after {
          border-color: #fff;
          width: 3px;
          height: 7px;
          top: 2px;
          left: 5px;
          border-width: 2px;
        }
      }
    }
    &.is-disabled.is-checked,
    &.is-disabled.is-indeterminate {
      opacity: 0.4;
      .el-checkbox__inner {
        border-color: $theme;
        background: $theme;
        &::after {
          border-color: #fff;
          width: 3px;
          height: 7px;
          top: 2px;
          left: 5px;
          border-width: 2px;
        }
      }
    }
  }
  .el-checkbox__label {
    padding-left: 6px;
  }
  &.is-checked,
  &.is-indeterminate {
    .el-checkbox__label {
      color: $default-text-color;
    }
  }
  &.is-disabled {
    .el-checkbox__input {
      opacity: 0.4;
    }
    .el-checkbox__label {
      color: $default-text-color;
      //opacity: 0.4;
    }
  }
}
// switch样式覆写
::v-deep .el-switch {
  height: 16px;
  line-height: 16px;
  span.el-switch__core {
    height: 16px;
    &::after {
      top: 0;
      left: 1px;
      width: 14px;
      height: 100%;
      border-radius: 0;
      clip-path: circle(46%);
    }
  }
  &.is-checked {
    span.el-switch__core {
      &::after {
        left: 100%;
        margin-left: -14px;
      }
    }
  }
}
// 输入框样式覆写
::v-deep .el-input {
  input::placeholder {
    color: #909399;
  }
  input {
    border: 1px solid #dcdfe6;
    color: $default-text-color;
    &.is-disabled {
      background-color: #f5f7fa;
      color: #909399;
    }
  }
  .el-input__inner {
    padding-left: 12px;
    font-size: 14px;
    &:not([disabled]):not([readonly]):hover {
      border-color: #c0c4cc;
    }
    &:not([disabled]):not([readonly]):focus {
      border-color: #a9a9a9;
    }
  }
  .el-input__suffix-inner {
    i {
      color: #909399;
    }
    .el-icon-circle-close:before {
      color: #909399;
      font-size: 28px;
      font-family: "iconfont";
      content: "\ebf7";
    }
  }
}
// 文本域样式覆写
::v-deep .el-textarea {
  .el-textarea__inner {
    padding-left: 12px;
    color: $default-text-color;
    font-size: 14px;
    &:focus {
      border-color: #a9a9a9;
    }
  }
}
// 选择器样式覆写
::v-deep .el-select,
::v-deep .el-cascader {
  .el-input {
    input::placeholder {
      color: #909399;
    }
    &.is-focus {
      .el-input__inner {
        border-color: #dcdfe6;
      }
    }
  }
  .el-input__inner {
    padding-left: 12px;
    font-size: 14px;
    &:not([disabled]):hover {
      border-color: #c0c4cc;
    }
    &:not([disabled]):focus {
      border-color: #a9a9a9;
    }
  }
  .el-input__suffix-inner {
    i {
      color: #909399;
      &.el-icon-arrow-up {
        font-weight: bold;
      }
      &.el-icon-arrow-down {
        font-weight: bold;
      }
    }
  }
  .el-select__tags {
    .el-tag {
      background: #f5f7fa;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      color: $default-text-color;
      padding: 0 6px;
    }
  }
}
// 时间选择器时间图标样式覆写
::v-deep .el-date-editor.el-range-editor.el-input__inner {
  padding-left: 14px; // 因为这个图标有点偏左，所以不用12用14
  .el-range__icon {
    color: #909399;
    font-size: 14px;
    //margin-right: 6px;
  }
}
// 分页器样式覆写
::v-deep .el-pagination {
  padding: 0px 0 0px 5px;
  line-height: 22px;
  .el-input__inner {
    text-align: left;
    font-size: 12px;
    padding-left: 12px;
    line-height: 22px;
    height: 22px;
  }
  button,
  span:not([class*="suffix"]) {
    display: inline-block;
    font-size: 12px;
    min-width: 35.5px;
    height: 22px;
    line-height: 22px;
    vertical-align: baseline;
    box-sizing: border-box;
  }
  .el-pagination__total {
    margin-right: 6px;
  }
  .el-pagination__sizes {
    margin: 0 3px 0 0;
    .el-select {
      margin: 0 0px;
      .el-input {
        margin: 0 0px;
        width: 90px;
        .el-input__inner {
          font-size: 12px;
          border-radius: 4px;
          height: 22px;
          line-height: 1;
          padding-right: 22px !important;
          &:hover {
            border-color: #c0c4cc;
          }
        }
      }
      .el-input--mini .el-input__icon {
        line-height: 1;
        color: #909399;
      }
    }
  }
  .btn-next,
  .btn-prev,
  .el-pager li {
    margin: 0 3px;
    background: #f5f7fa;
    color: $default-text-color;
    min-width: 22px;
    border-radius: 4px;
    &:disabled {
      i {
        opacity: 0.4;
      }
    }
  }
  .btn-next,
  .btn-prev {
    color: #909399;
  }
  .el-pager li {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    min-width: 22px;
    &:not(.disabled).active {
      background-color: $theme;
      color: #fff;
    }
    &.el-icon-d-arrow-left,
    &.el-icon-d-arrow-right {
      &::before {
        content: "\e794";
      }
    }
  }
  .el-pagination__jump {
    margin-left: 3px;
    .el-pagination__editor {
      line-height: 22px;
      padding: 0 0px;
      height: 22px;
      text-align: left;
      margin: 0 6px;
      box-sizing: border-box;
      border-radius: 4px;
    }
    .el-input.el-pagination__editor {
      min-width: 48px;
      font-size: 12px;
      width: unset;
      .el-input__inner {
        height: 22px;
        line-height: 22px;
        padding: 0 12px;
        text-align: center;
      }
    }
  }
}

// 单选按钮样式覆写
::v-deep .el-radio {
  .el-radio__label {
    padding-left: 12px;
  }
  &.is-checked {
    .el-radio__label {
      font-size: 14px;
      padding-left: 12px;
      color: $default-text-color;
    }
  }
  &.is-disabled .el-radio__label {
    padding-left: 12px;
    color: $default-text-color;
    opacity: 0.4;
  }
  .el-radio__inner {
    background: #fff;
  }
  .el-radio__input.is-checked {
    .el-radio__inner {
      background-color: $theme;
      border-color: $theme;
      &::after {
        background-color: #fff;
      }
    }
  }
  .el-radio__input.is-checked.is-disabled {
    .el-radio__inner {
      background-color: $theme;
      border-color: $theme;
      opacity: 0.4;
      &::after {
        background-color: #fff;
      }
    }
  }
}

// 业务相关 -- 弹窗底部按钮最小宽度为60px
::v-deep .el-dialog__footer {
  .el-button {
    min-width: 60px;
  }
}
::v-deep .query-criteria-group {
  &.el-form {
    .el-form-item {
      .el-form-item__content {
        padding: 0 0 0 12px;
      }
      &.el-form-item--small {
        margin-bottom: 12px;
      }
      .el-input__inner::placeholder {
        color: #909399;
      }
      .el-cascader__search-input {
        margin-left: 12px;
        &::placeholder {
          color: #909399;
        }
      }
    }
  }
}
::v-deep .el-select.max-width-tags {
  height: 32px;
  .el-select__tags {
    max-width: 60% !important;
    flex-wrap: nowrap;
    input {
      min-width: 30% !important;
    }
  }
  .el-input,
  input {
    height: 100% !important;
  }
}
.m-l-12 {
  margin-left: 12px !important;
}
.m-b-12 {
  margin-bottom: 12px;
}

.tabs ::v-deep .el-tabs__item {
  padding: 0 12px;
}

.collapse-item-bottom ::v-deep .el-collapse-item {
  // margin-bottom: 24px;
}

//滚动条样式
::v-deep textarea::-webkit-scrollbar-thumb {
  background: #dcdfe6;
}
.scrollbar ::-webkit-scrollbar-thumb {
  border-radius: 3px !important;
  background: #dcdfe6 !important;
  border: none !important;
}
.scrollbar ::-webkit-scrollbar {
  width: 6px !important;
  height: 8px !important;
}

.common-select {
  &.ct-select {
    width: 100%;
  }
}
// 临时处理方案
::v-deep .ct-tech-ui {
  .el-select .el-input .el-icon-circle-close {
    background: none;
  }
  &.el-range-editor--small .el-range-separator,
  &.el-range-editor--small .el-range__icon {
    line-height: 30px;
  }
}
::v-deep .el-cascader__search-input {
  font-size: 14px;
}
::v-deep .el-tabs.page-header-tab {
  &.only-one {
    .el-tabs__active-bar {
      transform: translateX(0px) !important;
    }
  }
  .el-tabs__item {
    font-family: PingFangSC, PingFang SC;
    padding: 0;
    font-size: 16px;
    line-height: 48px;
    height: 48px;
    font-weight: 400;
    + .el-tabs__item {
      padding-left: 24px;
    }
  }
  .el-tabs__item.is-active {
    font-weight: 500;
  }
  .el-tabs__header {
    .el-tabs__nav-wrap {
      &::after {
        height: 1px;
      }
    }
  }
}
::v-deep .confidenceLevel {
  .center-text {
    background: #f5f7fa;
  }
  .bor .el-select .el-input__inner {
    text-align: left;
    padding-left: 12px!important;
    padding-right: 12px;
    margin-left: 0;
  }
}
::v-deep .confidenceLevel .bor {
  .el-input__inner::placeholder {
    text-align: left;
    font-size: 14px;
  }
}
::v-deep .el-table .el-table__header-wrapper .cell {
  color: #606266 !important;
}
.list-no-data {
  height: 199px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &::before {
    width: 64px;
    height: 41px;
    margin-top: 3px;
    content: " ";
    position: absolute;
    background: url("@/assets/image/svg/empty.svg") no-repeat;
  }
  &::after {
    content: "暂无数据";
    margin-top: 82px;
    color: #909399;
    font-size: 13px;
  }
}
